<template>
    <div class="app-container">
        <div style="font-size: 20px; line-height: 30px;" v-if="type==0">
            <div style="margin-bottom: 10px;">很遗憾，您没有通过今天的新闻阅读注意力测试。您可以选择退出此次调查；根据知情同意书的规定，您将不会获得任何奖励。或者，您可以选择重新进行至少10分钟的新闻阅读。</div>
            <el-button type="primary" @click="handleQuite">退出调查</el-button>
            <el-button type="primary" @click="again">重新阅读</el-button>
        </div>
        <div v-else>
            <div style="margin-bottom: 30px; font-size: 20px; line-height: 30px;"> 恭喜您通过今天的新闻阅读注意力测试，并感谢您完成了今天的新闻阅读任务！</div>
            <div style="color: red; margin-bottom: 20px;">如您参加的是多天实验，请您于明天上午10点到晚上11点30分的任意时间再次登录我们的新闻平台进行实验。感谢您的合作！</div>
            <el-button type="primary" @click="handleQuite">退出调查</el-button>
            <el-button type="primary" @click="again">继续阅读</el-button>
        </div>

        <!-- <div style="margin-top: 20px; line-height: 30px;">
            本次测试时间：{{ time }} <br/>
            测试用户id: {{ userId }}  <br/>
            测试用户：{{ username }}
        </div> -->
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        type: '', //0失败 1成功,
        time: '',
        userId: '',
        username: ''
      }
    },
    mounted(){
        this.type = this.$route.query.type
        this.time = this.$route.query.time
        this.userId = this.$route.query.userId
        this.username = this.$route.query.username
        this.addWatermark(this.time + '/' + this.username + '/' + this.userId )
    },
    methods: {
        addWatermark(name) {
            const container = document.querySelector('.app-container');
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = 300;
            canvas.height = 120;
            // 设置水印文字样式
            ctx.fillStyle = 'rgba(255,255,255,.1)';
            // ctx.fillStyle = '#DDD';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            // ctx.rotate(-Math.atan(canvas.height / canvas.width) *1.4);
            ctx.rotate(-0.2);
            ctx.font = '12px Arial';
            ctx.fillStyle = 'rgba(0,0,0,.2)';
            ctx.fillText(name, canvas.width / 2, canvas.height / 2);
            
        
            const img = new Image();
            img.src = canvas.toDataURL('image/png');
            img.style.position = 'absolute';
            img.style.left = '0';
            img.style.top = '0';
            img.style.zIndex = '1000';
            img.style.pointerEvents = 'none'; // 防止水印阻挡鼠标事件
            container.style.position = 'relative';
            container.style.backgroundImage = `url(${canvas.toDataURL('image/png')})`
            // container.appendChild(img);
        },
        // 跳转阅读页面，继续阅读
        async again(){
            //重新开始
            sessionStorage.setItem('type', 'start');
            localStorage.setItem('time', 0)   
            this.$router.push('/start')
        },
        //退出登录
        async handleQuite(){
            await this.$store.dispatch('user/logout')
            this.$router.push(`/login`)
        }
    }
  }
  </script>
  
  <style scoped>
  .app-container{
    height: 100vh;
  }
  </style>
  
  